☄ EXPOLORE MIND ⚜ Tutorial ? JIQA Biography News
PRV MENU NEXT

Defining New Element-Specific Attributes

23-01-18 Course- HTML5-Simple

HTML 5 has introduced some new element-specific attributes in the <iframe> tag that are specific to the iframe element only these attributes are given as follows:

  • seamless
  • sandbox

in this section, you learn to use the seamless and sandbox element-specific attributes of the iframe element.

Using the seamless Attribute

The seamless attribute is used in the <iframe> tag, which shows an inline frame to be a part of the containing document. It accepts two possible values-empty or seamless.

Let’s do the following steps to create a frame

Using the Seamless Attribute in Frame


<!DOCTYPE html>
<head>
    <title>Use of Attribute</title>
</head>
<body>
<I frame seamless=”seamless” src=page1.html”></iframe>
<br/><br/>
<iframe seamless src=”page1.html”></iframe>
</body>
</html>

Save the document with the name SeamlessFrames.html. And open on browser.

Defining the Frame


<!DOCTYPE html>
<head>
    <title>Fastread Tutorial</title>
</head>
<body>
<h1 align=”center”> HTML 5 Tutorial</h1>
<h3 align=”center”> CSS 3 Tutorial</h3>
</body>
</html>

Save the document as page1.html

Using the sandbox Attribute

In HTML 5, you can provide the restrictions to the content such as disabling scripts or plug-ins given in the internal frame by using the sandbox attribute of the iframe element. Its values are specified as an unordered set of unique space-separated tokens. By default, it defines a null value. With the use of sandbox attribute, you can disable the scripts, forms, and plug-ins.

The sandbox attribute takes the following values:

allow-same-origin: Disables the plug-in that are generated in the frame content.

allow-forms: Disables the forms given in the internal frame.

allow-scripts: Refers to the value of the iframe element. This value disable the script to be run.

Let’s do the following steps to create a frame using the sandbox attribute:


<!DOCTYPE html>
<head>
    <title>Use of Attribute</title>
</head>
<body bgcolor=”yellow”>
<iframe seamless src=”frame1.html” sandbox=”allow-same-orgin”></iframe>
<iframe seamless src=”frame1.html” sandbox=”allow-scripts”></iframe>
</body>
</html>

Save the document with the name SandboxFrames.html. and open on browser.

Specifying Width and Height of a Frame

You can specify the width and height of frames by using the width and height attributes in HTML 5.

Let’s do the following steps to create a frame by specifying width and height of the frame:


<!DOCTYPE html>
<head>
    <title>Specifying height and width</title>
</head>
<body bgcolor=”yellow”>
<iframe seamless src=”frame1.html” sandbox=”allow-same-orgin”></iframe>
<iframe seamless height=”200” width=”200”  src=”frame1.html” sandbox=”allow-top-navigation”></iframe>
</body>
</html>

Save the document with the name of widthHeight.html. and open on browser.

PRV MENU NEXT